<style>
td.unable {background:#dfdfdf;}
table.display tbody tr:hover td {background:none;}
table.display tbody tr:hover td.unable {background:#dfdfdf;}
table.display tbody tr:hover td.red {background:#660000;}
td.data input { display: none; }
td.edit span { display: none; }
td.edit a { display: none; }
td.edit input { display: block; }
input {width:30px; margin-left:25%;}

ul.paging{ list-style:none;}
ul.paging li.prev{float:left;}
ul.paging li.next{float:left;}

.left{float:left; width:200px; margin-bottom:10px;}
.span4{margin-bottom:10px;}
</style>
<script type="text/javascript">
 $(document).ready(function(){
  tampil_data(0,0,0,0,0); 
  tampil_kebutuhan(0);
  pilih_pages();
  
  $("#nama_barang").change(function() {
		var id_pemesanan = $(this).find("option:selected").val();
		var data_kosong = $('#kosong');
		data_kosong.remove();
		tampil_data(0,0,0,0,id_pemesanan); 
		tampil_kebutuhan(id_pemesanan);
	});
  
//mengganti element td dengan input untuk ubah data  
  $("td.update").live("click", function() {
	var parent = $(this);
	var txt = parent.children("span.jumlah").text();
	var x = parent.children("form");
    parent.addClass('edit');
	x.children(":text").focus();
	x.find("input[name='jumlah']").val(txt);
    return false;
  });
  
  $("td.add").live("click", function() {
	var parent = $(this);
	var txt = parent.children("span.jumlah").text();
	var x = parent.children("form");
    parent.addClass('edit');
	x.children(":text").focus();
	console.log(txt);
    return false;
  });
  
    // $("td.data a.delete").live("click", function() {
	// var parent = $(this).parent();
	// var answer = confirm ("Apakah anda yakin akan menghapus data ini?");
	// var id_produksi = $(this).attr('href');
	// if(answer)
	// {		
	// event.preventDefault();
	// $.ajax({
           // type:"POST",
           // url: "<?php echo base_url()?>produksi/delete",
           // data: "id_produksi="+id_produksi,
           // asynchronous: true,
           // cashe: false,
          // success: function(){
			// parent.children("a.add").removeClass("hidden");
			// parent.children("a.update").addClass("hidden");
			// parent.children("a.delete").addClass("hidden");
			// parent.children("span.jumlah").text(" ");
			// var bulan = document.getElementById("bulan").innerHTML;
			// var tanggal = document.getElementById("tanggal").innerHTML;
			// var nama_hari = document.getElementById("nama_hari").innerHTML;
			// var id_pemesanan = $("#nama_barang").find("option:selected").val();
			// tampil_data(0,bulan,tanggal,nama_hari,id_pemesanan);
          // }

         // });
	// }
  // });
  
 //kebalikan diatas
 $("td.data form :text").live("blur", function(event) {
	var txt = $(this);
	var x = txt.parent();
	var parent = x.parent();
	parent.removeClass("edit");
  });
  
 $("td.data form :text").live("keypress", function(event) {
	var keycode = (event.keyCode ? event.keyCode : event.which);
	var txt = $(this);
	var x = txt.parent();
	var parent = x.parent();
	if(keycode == '13'){		
		x.submit(function( event ) {
 
		  // Biar submit form normal ga dilakuin
		  event.preventDefault();
		 
		  // ngambil value
		  var form = x,
		  id_produksi = form.find( "input[name='id_produksi']" ).val();
		  jumlah = form.find( "input[name='jumlah']" ).val(),
		  tanggal = form.find( "input[name='tanggal']" ).val(),
		  id_pemesanan = form.find( "input[name='id_pemesanan']" ).val(),
		  id_langkah_kerja = form.find( "input[name='id_langkah_kerja']" ).val(),
		  url = form.attr( "action" );
		 
		  // Send the data using post
		  var posting = $.post( url, { jumlah:jumlah,tanggal:tanggal,id_pemesanan:id_pemesanan,id_langkah_kerja:id_langkah_kerja,id_produksi:id_produksi } );
		 
		  // Put the results in a div
		  posting.done(function( data ) {
			parent.children("span.jumlah").text(x.children(":text").val());
			parent.removeClass("edit");
			
			var bulan = document.getElementById("bulan").innerHTML;
			var tanggal = document.getElementById("tanggal").innerHTML;
			var nama_hari = document.getElementById("nama_hari").innerHTML;
			var id_pemesanan = $("#nama_barang").find("option:selected").val();
			tampil_data(0,bulan,tanggal,nama_hari,id_pemesanan);
			
			if(parent.attr("class","add") == true)
			{
				parent.removeClass("add");
				parent.addClass("update");
			}
		   });
		});
	}
  });
 
 });
 function show_loader(){
  $(".loading").fadeIn(200);
 }

 function hide_loader(){
  $(".loading").fadeOut(200);
 }

 function tampil_data(pages,bulan,tanggal,nama_hari,id_pemesanan){
  show_loader();
  $("#tampil_data").load("<?=base_url()?>/produksi/tampil_data/" + id_pemesanan + "/" + bulan + "/" + tanggal + "/" + nama_hari + "/" + pages, hide_loader);
 }
 function tampil_kebutuhan(id_pemesanan)
 {
	$("#kebutuhan").load("<?=base_url()?>/produksi/tampil_kebutuhan/"+id_pemesanan);
 }
 function pilih_pages(){
  $(".next").click(function(){
   var pages = this.id;
   var bulan = document.getElementById("bulan").innerHTML;
   var tanggal = document.getElementById("tanggal").innerHTML;
   var nama_hari = document.getElementById("nama_hari").innerHTML;
   var id_pemesanan = $("#nama_barang").find("option:selected").val();
   tampil_data(pages,bulan,tanggal,nama_hari,id_pemesanan);
   tampil_kebutuhan(id_pemesanan);
   return false;
  });
  
  $(".prev").click(function(){
   var pages = this.id; 
   var bulan = document.getElementById("bulan").innerHTML;
   var tanggal = document.getElementById("tanggal").innerHTML;
   var nama_hari = document.getElementById("nama_hari").innerHTML;
   var id_pemesanan = $("#nama_barang").find("option:selected").val();
   tampil_data(pages,bulan,tanggal,nama_hari,id_pemesanan);
   tampil_kebutuhan(id_pemesanan);
   return false;
  });
 }
 
</script>
<div id="wrapper">
        <!--Body content-->
        <div id="content" class="clearfix">
            <div class="contentwrapper"><!--Content wrapper-->

                <div class="heading">

                    <h3>Data Produksi</h3>                    

                    <div class="resBtnSearch">
                        <a href="#"><span class="icon16 icomoon-icon-search-3"></span></a>
                    </div>

                    <!--<div class="search">

                        <form id="searchform" action="http://themes.suggeelson.com/supr/search.html">
                            <input type="text" id="tipue_search_input" class="top-search" placeholder="Search here ..." />
                            <input type="submit" id="tipue_search_button" class="search-btn" value=""/>
                        </form>
                
                    </div>
                    
                    <ul class="breadcrumb">
                        <li>You are here:</li>
                        <li>
                            <a href="#" class="tip" title="back to dashboard">
                                <span class="icon16 icomoon-icon-screen-2"></span>
                            </a> 
                            <span class="divider">
                                <span class="icon16 icomoon-icon-arrow-right-2"></span>
                            </span>
                        </li>
                        <li class="active">Data tables</li>
                    </ul>

                </div><!-- End .heading-->
    				
                <!-- Build page from here: Usual with <div class="row-fluid"></div> -->

                    <div class="row-fluid">

                        <div class="span12">

                            <div class="box gradient">

                                <div class="title">
                                    <h4>
                                        <span>Tabel Produksi</span>
                                    </h4>
                                </div>
                                <div class="content clearfix">
										<div class="span4"><br>
										<select id="nama_barang" name="nama_barang"> <br><br>
													<option value="0" id="kosong">--Pilih Nama Barang--</option>
											<?php
												foreach($get_pemesanan->result() as $row)
												{
											?>
													<option value="<?=$row->id_pemesanan?>"><?=$row->nama_barang?> - <?=$row->nama_pemesan?></option>
											<?php
												}
											?>
										</select>
										</div>
										<div id="tampil_data"></div><!--Menampilkan kalender-->
										
										<div id="paging_button">
											<ul class="pager paging">
												<?php $i=0;?>
												<li id="-1" class="prev">
													<a href="#">&larr; Older</a>
												</li>
												<li id="1" class="next">
													<a href="#">Newer &rarr;</a>
												</li>
											</ul>
										</div>
										
                                </div>

                            </div><!-- End .box -->
							<div class="box gradient">

                                <div class="title">
                                    <h4>
                                        <span>Tabel Kebutuhan</span>
                                    </h4>
                                </div>
                                <div class="content clearfix">
									<div id="kebutuhan"></div>										
                                </div>

                            </div><!-- End .box -->

                        </div><!-- End .span12 -->

                    </div><!-- End .row-fluid -->
                   				
            </div><!-- End contentwrapper -->
        </div><!-- End #content -->
    </div><!-- End #wrapper -->
	